<template>
  <div>
  <el-container>

  
  <el-header id="head">

  <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/management">管理</a></el-breadcrumb-item>
  </el-breadcrumb>
  <br>

<el-row :gutter="30">
  <el-col :span="2">
    <span class="text">邀请成员:</span>
  </el-col>

  <el-col :span="7" :offset="0"><div class="grid-content bg-purple">
    <el-input v-model="inviteNum" placeholder="请输入邀请成员数量（需拥有管理员权限）"></el-input>
  </div></el-col>

     
  <!-- <el-col :span="3"><div class="grid-content bg-purple">
    <el-button round type="primary" @click="invite">邀请加入</el-button>
  </div></el-col> -->

    
  <el-col :span="2"><div class="grid-content bg-purple">
    <el-button type="primary" @click="inviteUser">生成邀请码 </el-button>
  </div></el-col>
</el-row> 
<br>

<el-row :gutter="30" class="secondRow">
  <el-col :span="2">
    <span class="text">搜索成员:</span>
  </el-col>
  <el-col :span="9" :offset="0">
    <!-- <el-input
      placeholder="搜索团队"
      prefix-icon="el-icon-circle-plus-outline"
      v-model="searchName"
    >
    </el-input> -->
    <el-input placeholder="搜索成员昵称" v-model="searchName" class="input-with-select" clearable @clear='getUserList'>
      <el-button slot="append" type="info" plain icon="el-icon-search" @click="getUserList"></el-button>
    </el-input>
  </el-col>
  <el-col :span="5" :offset="1">
    <!-- <el-button type="primary" @click="createGroup">创建团队</el-button> -->
    <el-select v-model="sort" placeholder="选择排序方式">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="4">
    <el-button type="primary" @click="getUserList" width="100">进行排序</el-button>
  </el-col>
</el-row>
  
 
  
  </el-header>

  <el-dialog
    title="邀请码"
    :visible.sync="inviteDialogVisible"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    width="30%"
    :before-close="handleCloseInvite">
    <span>可用人数: {{invietNumDialog}}</span>
    <br><br>
    ↓请复制以下邀请码，并发送给对方↓
    <br><br>
    <span>{{inviteCode}}</span>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button @click="inviteDialogVisible = false">取 消</el-button> -->
      <el-button type="primary" @click="inviteDialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>


  <el-container>
    <!-- <el-aside width="150px" id="aside" >
     <br><br><br>
    <el-button type="primary" round  @click="c=1" label="全部成员">全部成员</el-button>
    <br>
    <br>
    <el-button type="primary" round  @click="c=2" label=" 管理员 ">管理员 </el-button>
    <br>
    <br>
    <el-button type="primary" round   @click="c=3" label="普通成员"> 成员 </el-button>
    <br>
    <br>

    </el-aside> -->

    <!-- 列表部分 3个v-if分支 -->
    <el-main v-model="c" v-if="c==1">
    <h1> &nbsp;
    </h1>



    <el-table :data="userList" border stripe height="500px">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="昵称" prop="petname"></el-table-column>
      <el-table-column label="真实姓名" prop="realname"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="身份" prop="isadmin">
        <template slot-scope="scope">
          {{role[parseInt(scope.row.isadmin)]}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="任命为队长" placement="top" :enterable="false" >
            <el-button type="primary" icon="el-icon-user-solid" size="small" round @click="leaderReplace(scope.row.uid)"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="任命为管理员" placement="top" :enterable="false" >
            <el-button type="primary" icon="el-icon-user" size="small" round @click="roleChange(scope.row.uid, '1')"></el-button>
          </el-tooltip>
          <el-tooltip  effect="dark" content="解除职务" placement="top" :enterable="false" >
            <el-button type="info" plain icon="el-icon-user" size="small" round @click="roleChange(scope.row.uid, '0')"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="移出团队" placement="top" :enterable="false">
          <el-button type="danger" icon="el-icon-close" size="small" round @click="handleKickUser(scope.row.uid, scope.row.petname)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>




    <!-- <el-table
    :data="tableData1"
    style="width: 100%">
    <el-table-column 
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="手机"
      width="180">
    </el-table-column>
    <el-table-column
      prop="mail"
      label="邮箱"
      width="180">
    </el-table-column>
  </el-table> -->
  </el-main>

  <!-- <el-main v-model="c" v-if="c==2">
   <h1>管理员</h1>
    <el-table
    :data="tableData2"
    style="width: 100%">
    <el-table-column 
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="手机"
      width="180">
    </el-table-column>
    <el-table-column
      prop="mail"
      label="邮箱"
      width="180">
    </el-table-column>
  </el-table>
  </el-main>

   <el-main v-model="c" v-if="c==3">
   <h1>普通成员</h1>
    <el-table
    :data="tableData3"
    style="width: 100%">
    <el-table-column 
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="手机"
      width="180">
    </el-table-column>
    <el-table-column
      prop="mail"
      label="邮箱"
      width="180">
    </el-table-column>
  </el-table>
  </el-main> -->
  </el-container>


</el-container>
 </div>
</template>

<script>
import qs from 'qs';
export default {
  data() {
    return {
      //用户列表数据
      userList: [],
      //身份数组
      role:[
        '普通成员',
        '管理员',
        '队长',
      ],
      //邀请成员数量
      inviteNum: '',
      //邀请数量在对话框中显示的内容
      invietNumDialog: '',
      //邀请码复制对话框是否显示
      inviteDialogVisible: false,
      //邀请码内容
      inviteCode: '',
      //移除成员对话框是否显示
      kickDialogVisible: false,
      //查找成员的名字
      searchName: '',
      //排序选项
      sort: '',
      //选择器备选排序方式
      options: [{
          value: 'petname',
          label: '昵称'
        }, {
          value: 'realname',
          label: '真实名称'
        }, {
          value: 'email',
          label: '邮箱'
        }, {
          value: 'role',
          label: '身份'
        }],


      tabPosition: 'left',
      c:1,//控制显示列表
      // input:''//输入框的值

    }
  },
  created() {
  //创建页面时更新用户列表
  this.getUserList();
  },  
  methods:{
    invite(){
      alert("邀请成员")
    },
    getUserList(){
      console.log(this.role[parseInt('1')]);
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const grouptoken = this.$store.getters.getGroup.group.grouptoken;
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/teams/check" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          teamtoken: grouptoken,
          usertoken: usertoken,
          sort: this.sort,
          search: this.searchName,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.userList = res.data.message;
        }
      });
    },

    //更换队长
    leaderReplace(userid){
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/teams/replace" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          usertoken: usertoken,
          teamtoken: teamtoken,
          userid: userid,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
          //更换队长后刷新成员列表
          this.getUserList();
        }
      });
    },

    //身份修改
    roleChange(userid, newrole){
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/teams/change" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          usertoken: usertoken,
          teamtoken: teamtoken,
          userid: userid,
          newrole: newrole,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
          //身份修改后刷新成员列表
          this.getUserList();
        }
      });
    },

    //踢出团队
    kickUser(userid){
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/teams/kick" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          usertoken: usertoken,
          teamtoken: teamtoken,
          userid: userid,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
          //踢出成员后刷新成员列表
          this.getUserList();
        }
      });
    },

    //邀请成员
    inviteUser(){
      // 检查邀请成员邮箱是否有填写内容
      if (this.inviteNum === '') {
        this.$message.warning("请输入邀请成员数量！");
        return;
      }
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/teams/invite" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          times: this.inviteNum,
          usertoken: usertoken,
          teamtoken: teamtoken,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.inviteCode = res.data.message;
          this.inviteDialogVisible = true;
          this.invietNumDialog = this.inviteNum;
          this.$message.success(res.data.message);
          this.inviteNum = '';
          //邀请成员后刷新成员列表
          this.getUserList();
        }
      });
    },
    
    //弹出对话框，确认是否关闭邀请码对话框
    handleCloseInvite(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    //弹出对话框，确认是否踢出成员
    handleKickUser(userid, petname) {
      this.$confirm('您确认要将用户: ' + petname + ' 移出团队吗？')
        .then(_ => {
          this.kickUser(userid);
        })
        .catch(_ => {});
    }


  },
  
};
</script>

<style scoped>
h1{
  text-align: left;
}

.text{
  font-size: 16px;
  /* text-align: center; */
  /* margin-top: 10px;
  border-top: 10px; */
}

</style>